<template>
  <div :class="['dynamic', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="title" v-if="$ua.isFromPc()">
      <div class="chinese">
        艺术动态
      </div>
    </div>
    <div class="tab-title-box">
      <div :class="['tab-title', 'all-center', active == index ? 'new-tab-title' : '']" v-for="(item, index) in tabList" @click="handleTab(index)">
        {{ item }}
      </div>
    </div>
    <div class="dynamic-list-box">
      <div v-show="active == '0'" class="essay-content" v-for="(item, index) in dynamicList" @click="goDesc(item.data_id, 0)" :key="item.data_id">
        <div class="essay-title">
          {{ item.title }}
        </div>
        <div class="img-list" v-if="Array.isArray(item.show_url_list)">
          <img v-for="(item, index) in item.show_url_list?.slice(0, $ua.isFromPc() ? 4 : 3)" :key="index" :src="item" alt="" />
        </div>
        <div class="foot">
          <span class="name">{{ item.author }}</span>
          <span class="read-count">{{ item.read_count + '人阅读' }}</span>
          <span class="time">{{ item.create_time }}</span>
        </div>
        <div v-if="!$ua.isFromPc()" class="line" />
      </div>
      <div class="activity-content-box">
        <div v-show="active == '1'" class="activity-content" v-for="(item, index) in activityList" :key="index" @click="goDesc(item.data_id, 1)">
          <el-image v-if="item.title_page" fit="cover" class="image" :src="item.title_page" alt="">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <div class="activity-title">
            {{ item.name }}
          </div>
          <div class="time-box">
            <span class="time">
              {{ item.start_time }}
            </span>
            <span>-</span>
            <span class="time">
              {{ item.end_time }}
            </span>
            <span class="look">
              <img src="@/static/img/editPersonalHome/zhenyan.png" alt="">
              {{ item.read_count }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="see-more">
      <div class="line"></div>
      <div @click="goDynamic" class="text">查看更多<img src="@/static/img/home/arrow.png" alt=""></div>
    </div>
  </div>
</template>

<script>
// import dynamicList from './dynamic'
export default {
  data() {
    return {
      dynamicList: [],
      activityList: [],
      tabList: [
        '新闻动态',
        '专题活动'
      ],
      active: 0
    }
  },
  mounted() {
    this.getEssay()
    this.getDataList()
  },
  methods: {
    goDesc(data_id, index) {
      if (index === 1) {
        this.$router.push({ path: '/dynamic/activityDesc', query: { data_id }})
      } else {
        this.$router.push({ path: '/dynamic/articleDesc', query: { data_id } })
      }
    },
    handleTab(index) {
      this.active = index
    },
    goDynamic() {
      this.$router.push('/dynamic')
    },
    // 获取文章列表
    getEssay() {
      this.$api.getEssay({}).then(res => {
        this.dynamicList = Array.isArray(res.result.item_list) ? res.result.item_list.splice(0, 3) : []
      })
    },
    getDataList() {
      // 这里要写接口然后把数据和total丢进去
      let params = {
        page_num: 1,
        page_count: 2
        // art_id: this.$store.state.user.info?.user_info?.data_id || ''
      }
      // 获取专题活动列表
      this.$api.getActivity(params).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('res.result.item_list', res.result.item_list)
          this.activityList = Array.isArray(res.result.item_list) ? res.result.item_list.splice(0, 3) : []
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
  .dynamic {
    &.z-web {
      padding: 160px 276px 258px;
      position: relative;

      .title {
        position: absolute;
        top: 160px;
        right: 141px;
      }

      .tab-title-box {
        margin-bottom: 60px;

        .tab-title {
          width: 160px;
          height: 60px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          background: #FFFFFF;
          border: 1px solid #999999;
          color: #000;
          font-size: 24px;
          margin-right: 24px;
          opacity: 0.5;
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }
        }

        .new-tab-title {
          opacity: 1;
        }
      }

      .dynamic-list-box {
        .activity-content-box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }

        .activity-content {
          width: 656px;
          margin-bottom: 40px;
          cursor: pointer;

          ::v-deep(.el-image) {
            width: 100%;
            height: 369px;
          }

          .activity-title {
            line-height: 16px;
            font-size: 16px;
            font-weight: 600;
            color: #000;
            margin: 12px 0;
          }

          .time-box {
            font-size: 16px;
            font-weight: bold;
            color: #999;
            // line-height: 13px;

            .look {
              font-weight: 600;
              float: right;

              img {
                vertical-align: sub;
              }
            }
          }
        }

        .essay-content {
          text-align: left;
          cursor: pointer;

          .essay-title {
            font-size: 32px;
            font-weight: 600;
            color: #000000;
            line-height: 37px;
            margin-bottom: 15px;
          }

          .img-list {
            img {
              width: 320px;
              height: 240px;
              margin-right: 20px;
              object-fit: cover;

              &:last-child {
                margin-right: 0;
              }
            }
          }

          .foot {
            font-size: 16px;
            font-family: Source Han Serif SC;
            font-weight: 600;
            color: #333333;
            line-height: 37px;
            opacity: 0.75;

            span {
              display: inline-block;
              margin-right: 10px;
              margin-top: 16px;
            }
          }
        }
      }

      .see-more {
        float: right;
        margin-top: 100px;
      }
    }

    &.z-phone {
      padding: pxtorem(80) pxtorem(25) pxtorem(48);
      position: relative;

      .tab-title-box {
        margin-bottom: pxtorem(40);
        .tab-title {
          width: pxtorem(160);
          height: pxtorem(60);
          border: pxtorem(1) solid #999;
          margin-right: pxtorem(24);
          font-size: pxtorem(24);
          font-weight: 600;
          color: #000;
          opacity: 0.5;

          &:last-child {
            margin-right: 0;
          }

          &.new-tab-title {
            opacity: 1;
          }
        }
      }

      .dynamic-list-box {
        .essay-content {
          .essay-title {
            font-size: pxtorem(32);
            font-weight: 600;
            color: #000;
          }

          .img-list {
            img {
              width: pxtorem(220);
              height: pxtorem(165);
              margin-right: pxtorem(20);
              object-fit: cover;

              &:last-child {
                margin-right: 0;
              }
            }
          }

          .line {
            width: 100%;
            height: pxtorem(1);
            background: #E8E8E8;
            margin: pxtorem(32) 0;
          }
        }

        .activity-content-box {
          .activity-content {
            margin-bottom: pxtorem(60);
            ::v-deep(.el-image) {
              width: 100%;
              height: pxtorem(395);
              margin-bottom: pxtorem(34);
            }

            .activity-title {
              font-size: pxtorem(28);
              font-weight: 600;
              color: #000;
            }

            .time-box {
              font-size: pxtorem(24);
              font-weight: bold;
              color: #999;

              .look {
                float: right;
              }
            }
          }
        }
      }

      .see-more {
        width: pxtorem(150);
        margin-top: pxtorem(80);
        margin-left: pxtorem(70);
        position: absolute;
        right: pxtorem(25);
        top: 0;

        .text {
          margin-top: pxtorem(20);
          font-size: pxtorem(18);
          font-family: Source Han Serif SC;
          font-weight: 600;
          color: #000;
        }

        img {
          width: pxtorem(40);
          margin-top: pxtorem(10);
        }
      }
    }
  }
</style>